<template>
  <el-container>
    <el-header style="text-align: left; font-size: 12px">
      <span>全部用户</span>
    </el-header>
    <el-main>
      <el-table :data="tableData" >
        <el-table-column prop="name" label="用户名" width="140">
        </el-table-column>
        <el-table-column prop="level" label="等级" width="120">
        </el-table-column>
        <el-table-column prop="score" label="积分">
        </el-table-column>
        <el-table-column prop="number" label="账号">
        </el-table-column>
        <el-table-column prop="openid" label="openid">
        </el-table-column>
        <el-table-column  label="头像">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="100"  :src="'https://#/data/upload/picture/'+scope.row.icon"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="handleEdit2(scope.$index, scope.row)">发送消息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-dialog width="40%" title="发送系统消息" :visible.sync="dialogFormVisible2">
      <el-form>
        <el-form-item label="消息内容" :label-width="formLabelWidth">
          <el-input v-model="message" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";

export default {
  computed: {
    ...mapState('userOptions', ['token']),
  },
  name: "userAdmin",
  data() {
    return {
      tableData: [],
      dialogFormVisible2: false,
      form: {},
      kind: [],
      formLabelWidth: '100px',
      selected: '',
      id: '',
      message: '',
      sum: '',
      requests: []
    }
  },
  methods: {
    doSome() {
      console.log('do')
      this.dialogTableVisible = true
    },
    //发送消息
    handleEdit2(index, row) {
      this.dialogFormVisible2 = true
      this.id = row.id
      console.log(this.id)
    },
    //获取全部用户的方法
    getAllUsers() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.get(`/api/admin/user/all`).then(
          response => {
            if (response.data.code == 200) {
              loading.close();
              this.tableData = response.data.data
              console.log(this.tableData)
            } else {
              loading.close();
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            loading.close();
            this.$message.error('服务繁忙');
          }
      )
    },
    send() {
      axios.post(`/api/admin/user/` + this.message+'/'+this.id, {}, {
        headers: {
          token: this.token
        }
      }).then(
          response => {
            if (response.data.code == 200) {
              this.$message({
                message: '发送成功',
                type: 'success'
              });
              this.dialogFormVisible2 = false
              this.message = ''
            } else {
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            this.$message.error('服务繁忙');
          }
      )
    },
  },
  mounted() {
    this.getAllUsers()

  }
}
</script>

<style scoped>
.el-header {
  background-color: lightsteelblue;
  color: #333;
  line-height: 60px;
}
</style>
